<template>
    <!-- ytq添加优惠券 -->
    <div class="addProduct">
        <div class="breadcrumb">
            <Breadcrumb :aaa='aaa' :msgg="msg" :txt="txt" :path1="path1" />

        </div>

        <div class="form-container">
            <el-card body-style="padding-bottom:35px">
                <!-- 内容 -->
                <div class="el-card__body">
                    <!-- 输入框 -->
                    <el-form label-width="140px" :model="ruleForm" :rules="rules" ref="ruleFormRef">
                        <!-- 1 -->
                        <el-form-item prop="type" label="优惠券类型：">
                            <!-- <el-option prop="" label="全场赠券" value="0" />
                                <el-option prop="" label="会员赠券" value="1" />
                                <el-option prop="" label="购物赠券" value="2" />
                                <el-option prop="" label="注册赠券" value="3" /> -->
                            <el-select v-model="ruleForm.type" v-if="ruleForm.type === 0">
                                <el-option value="0">全场赠券</el-option>
                                <el-option value="1">会员赠券</el-option>
                                <el-option value="2">购物赠券</el-option>
                                <el-option value="3">注册赠券</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠券名称：" prop="name">
                            <el-input type="text" v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="适用平台：">
                            <el-input type="text" v-model="ruleForm.platform"></el-input>
                        </el-form-item>
                        <el-form-item label="总发行量：" prop="publishCount">
                            <el-input type="text" placeholder="只能输入正整数" v-model="ruleForm.publishCount"></el-input>
                        </el-form-item>
                        <el-form-item label="面额：" prop="amount">
                            <el-input prepend="append" placeholder="面值只能是数值，限2位小数" v-model="ruleForm.amount">
                                <template #append>元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="每人限领：">
                            <el-input prepend="append" v-model="ruleForm.perLimit">
                                <template #append>张</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="使用门槛：" prop="minPoint">
                            <el-input prepend="append" placeholder="只能输入正整数" v-model="ruleForm.minPoint">
                                <template #prepend>满</template>
                                <template #append>元可用</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="领取日期：">
                            <el-date-picker v-model="ruleForm.enableTime" type="date" placeholder="选择日期" />
                        </el-form-item>
                        <el-form-item label="有效期：">
                            <el-date-picker v-model="ruleForm.startTime" type="date"
                                placeholder="选择日期" />&nbsp;&nbsp;至&nbsp;&nbsp;
                            <el-date-picker v-model="ruleForm.endTime" type="date" placeholder="选择日期" />
                        </el-form-item>
                        <el-form-item label="可使用商品：">
                            <div class="demo-button-style">
                                <el-checkbox-group v-model="checkboxGroup4" size="small">
                                    <el-checkbox-button v-for="discountWay in ruleForm.usePro" :key="discountWay"
                                        :label="discountWay">{{ discountWay }}</el-checkbox-button>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="备注:">
                            <el-input type="textarea" placeholder="请输入内容" class="textarea" v-model="ruleForm.note" />
                        </el-form-item>
                        <el-button type="primary" style="margin-left: 140px" @click="submit(ruleFormRef)">提交
                        </el-button>
                        <el-button @click="onClear">重置
                        </el-button>
                    </el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    watch,
    onBeforeUnmount,
    shallowRef,
    onMounted,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as api from "../../request/api";
import Breadcrumb from '../../components/breadcrumb.vue'
import type { FormInstance, FormRules } from "element-plus";
import type { ICouponListItem } from "../../request/coupon/index";

let msg = ref('添加优惠券')
let txt = ref('营销')
let path1 = ref('sms/flash')
let aaa = ref(0)

// const type = ref("0"); //优惠券类型
// const name = ref(""); //优惠券名称 备注
// const platform = ref("全平台"); //适用平台
// const publishCount = ref(""); //总发行量
// const amount = ref(""); //面额
// const perLimit = ref("1"); //每人限领
// const minPoint = ref(""); //使用门槛
// const enableTime = ref(""); //领取日期
// const startTime = ref(""); //有效期
// const endTime = ref(""); //有效期
const checkboxGroup4 = reactive(["全场通用"]); //可使用商品
// const usePro = ["全场通用", "指定分类", "指定商品"]; //可使用商品
// const note = ref(""); //备注
// *
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
    amount: '',
    name: "",
    publishCount: '',
    minPoint: '',
    enableTime: '',
    startTime: '',
    endTime: '',
    note: '',
    type: 0,
    useType: 0,
    perLimit: 1,
    platform: 0,
    productCategoryRelationList: [],
    productRelationList: [],
    // checkboxGroup4: ["全场通用"],
    // usePro: ["全场通用", "指定分类", "指定商品"],
});
const rules = reactive<FormRules>({
    //优惠券名称
    name: [
        { required: true, message: "请输入优惠券名称", trigger: "blur" },
        { min: 2, max: 140, message: "长度在 2 到 140 个字符", trigger: "blur" },
    ],
    //总发行量
    publishCount: [{ required: true, message: "只能输入正整数", trigger: "blur" }],
    //使用门槛
    minPoint: [{ required: true, message: "只能输入正整数", trigger: "blur" },],
    //面额
    amount: [{ required: true, message: "面值只能是数值，0.01-10000，限2位小数", trigger: "blur" }],
});
// 提交添加
const submit = async (formEl: FormInstance | undefined, row: ICouponListItem) => {
    row = ruleForm;
    console.log(row)
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            ElMessageBox.confirm("是否提交数据? ", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                //添加
                let createData = await api.coupon.couponCreate(row)
                // tableData[createData].push(createData) //×有请求自动添加，不需要push
                ElMessage({
                    type: "success",
                    message: "添加成功",
                });
            })
                .catch(() => {
                    ElMessage({
                        type: "info",
                        message: "取消提交",
                    });
                });

        } else {
            ElMessage({
                type: "error",
                message: "验证失败",
            });
        }
    });
};
// 重置
let onClear = () => {
    ruleForm.name = "";
    ruleForm.publishCount = "";
    ruleForm.amount = "";
    ruleForm.minPoint = "";
    ruleForm.enableTime = "";
    ruleForm.startTime = "";
    ruleForm.endTime = "";
    ruleForm.note = "";
};
</script>

<style lang="scss" scoped>
.el-input,
.textarea {
    width: 340px;
}

.send {
    margin-left: 23px;
}

.form-container {
    left: 0;
    right: 0;
    width: 720px;
    padding: 27px 35px 15px 35px;
    margin: 20px auto;
    width: 820px;
}

.addProduct {
    background-color: white;
    height: 100vh;
}

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.f {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 20px;
}

.el-input-group {
    width: 60%;
}

.breadcrumb {
    height: 45px;
    border-bottom: 1px solid #ebeef5;
    font-size: 20px;
}

.el-card.is-always-shadow {
    box-shadow: none;
}

/* .el-card__body {
    padding: 50px 30px !important;
    width: 720px;
} */

.el-card {
    border-radius: 4px;
    border: 1px solid#ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}

////
.form-container {
    left: 0;
    right: 0;
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
}

.el-card {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}


.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 18px;
}
</style>
